리액트 네이티브 [React Native] 시작하기 React Native 개발환경 React Native CLI 준비 : Xcode(iOS) 또는 Android Studio(windows) Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정 1. Chocolatey 설치 Chocolatey 설치 확인 - Node.js 설치 및 확인 - jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기) windows 사용자로... 리액트 네이티브react nativereact native [앱개발]- 종류(Native, Hybrid, Cross-platform) and React Native, JS 정리해보자면 사용자들이 보는 앱 화면을 만들고 앱 개발은 대표적으로 "안드로이드"와 "iOS(아이폰)" 두 가지가 있다. 💡 앱 개발 종류 먼저 앱 개발 종류를 살펴보자면 안드로이드, iOS 각각 개발 하는 네이티브 앱! 마지막으로 위 두 가지 방법을 합친 크로스 플랫폼 앱! 🔍 네이티브 앱 (Native App) 다른 방식들보다 높은 수준의 기술력이 필요하며, 각기의 모바일 운영체제(OS)... 리액트 네이티브하이브리드 앱리터럴네이티브 앱비구조 할당Hybrid AppCross-platform Appmodule systemNative App크로스 플랫폼 앱화살표 함수react nativeMaparrow function자바스크립트Cross-platform App [앱개발]-React Native Expo JSX 리액트 네이티브(기술) & Expo(도구) 리액트 네이티브는 자바스크립트(js) 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 이다. (라이브러리란 개발 할 때 사용하는 도구이다.) 리액트 네이티브 크로스 플랫폼으로 개발하기 위한 빌드 도구이며, 네이티브 모듈을 보다 쉽고 편하게 사용할 수 있게 도와주는 도구이다. 리액트 네이티브 하나로 안드로이드 앱과 iOS앱 두... 리액트 네이티브JSXNodereact nativenpmExpoExpo 앱 프로젝트 - 1 프로젝트 주제 다이어트나 운동을 보조하기 위한 자기 관리 앱 기획안 [기획안 개요] 1) 프로젝트 이름/간단 설명 다이어터 식단 관리, 운동 방법 및 유명인들의 다이어트 방법 소개, 캘린더를 활용한 운동 스케쥴짜기 등등 --> 운동과 관련된 자기관리를 보조하는 앱 2) 프로젝트 생김새(레이아웃) --> 이미지의 'copy of 운동법' 부분은 운동일정에 관련된 부분입니다. 3) 개발해야 하는... 과제안드로이드 앱 개발리액트 네이티브과제 앱 페이지 적용 - 1 , 네비게이터란? 앱에 여러 페이지를 만들었다면 그 페이지를 이동할 수 있는 기능을 의미한다. --> React Navigation이라는 도구 사용할 것 (Expo측에서 개발한) [React Navigation 설치 가이드] --> yarn을 통해 설치 --> 기본 설치 코드 (네비게이터 활용을 위한) yarn add @react-navigation/native expo install react-native-... 안드로이드 앱 개발리액트 네이티브리액트 네이티브 [ReactNative] 네비게이터(Navigate) 네비게이션 앱 내의 페이지 구성 및 페이지 이동을 적용해주는 이 라이브러리는 다양한 기능들을 가지고 있다. 앱 하단에 탭 버튼을 두고 해당 버튼을 누르면 연결되어 있는 페이지로 바로바로 이동할 수 있게 해주는 기능도 가지고 있다. 스택네비게이션 우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어준다. 이렇게 만든 여러 페이지들을 책갈... reactnative리액트 네이티브reactnative JSX 기본 문법 리액트 네이티브라는 개발도구 위에 Expo를 올려서 손쉽게 코딩하는 형태 --> 기반은 리액트 네이티브이므로 모든 태그는 리액트 네이티브(도구상자)로 부터 불러옴 JSX 문법 --> <> 형태로 된 태그문법로 이루어짐 [Expo로 앱 생성시 초기 화면] --> App() 함수는 View태그를 반환(반환된 View로 화면을 그려주는 것) -->화면에 반환된 View 태그의 내용이 나타남 -->... JSXJavaScript리액트 네이티브안드로이드 앱 개발JSX {}표현식, 조건문 예시 ) 코드의 일부분 let todayWeather = 10 + 17; let todayCondition = "흐림" return ( return 구문 안에서는 {슬래시 + 방식으로 주석 <Text>오늘의 날씨: {자바스크립트처럼 + 연산}</Text> 사용 <Text>나 <ScrollView> 등의 태그에 style을 입히기 위해서도 {} 사용 --> styles.container등 st... JSXJavaScript리액트 네이티브안드로이드 앱 개발JSX 리액트 네이티브 - Expo 여러 앱기능 - 앱에서 외부링크 열기 앱에서 외부링크를 열기 위한 준비 expo에서 제공하는 도구 설치 expo install expo-linking 설치한 도구에서 불러오기 --> expo-linking안의 도구를 모두 가져온는데 그 이름을 Linking이라고 명명짓겠다는 의미 도구를 이용하여 함수 만들기 Linking.openURL(" ) 만든 함수를 활용... JSX리액트 네이티브안드로이드 앱 개발JSX 앱개발을 시작하며 - 자바스크립트 문법 다지기 '스파르타코딩클럽'의 '앱개발 종합반' 강의를 듣고 배우고 있습니다. 따라서 자바스크립트를 배워놓으면 웹도, 앱도 만들 수 있습니다. 크롬 콘솔창은 크롬 브라우저에서 F12를 누르면 열 수 있습니다. 자바스크립트에서는 변수를 선언하는 2가지 방법이 있습니다. 이렇게 let과 var 두 가지로 선언할 수 있습니다. 딕셔너리 또한 객체라고 부를 수 있습니다. 스택을 생각해보면 b_list.pop... 앱개발리액트 네이티브리액트 네이티브 앱개발 준비 - 리액트 네이티브&Expo 설치 및 세팅하기 2. 리액트 네이티브 & Expo 소개 및 설명 3. 리액트 네이티브 & Expo 설치 및 세팅 그렇지만 정말 리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로 앱 개발이 가능 하다 했지만 그렇지 않음을 알 수 있습니다. 그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드,iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구를 사용할건... 앱개발리액트 네이티브리액트 네이티브 [React Native] 어쩌구.gradle 파일의 부재로 빌드 실패하는 에러 해결 모바일 앱이 각 OS(안드로이드, IOS)에서 어떻게 빌드되고 동작하는지 그 플로우에 대한 이해도가 없는 없는 상태에서 마주하는 개발 환경 관련 Error들은, 실제 그 에러의 경중을 떠나 뉴비 모바일 웹 개발자를 당황시키기에 충분하다. 나는 리액트 개발만 조금 해본 귀여운 실력의 소유자이고, 모바일 앱에 대한 경험이 전무한 상태로 RN으로 앱을 만들어서 1월 말까지 출시해야 하는 팀(IT창... 리액트 네이티브react nativeerrorerror 리액트 네이티브 & Expo + Node.js,NPM 란 리액트 --> 웹화면을 만드는 프론트 기술 리액트 네이티브 --> 리액트 + 네이티브 --> 리액트 기술을 응용하여 앱을 만드는 기술 But 리액트 네이티브만으로 개발하다보면 JavaScript뿐만 아니라 안드로이드 코드, ios 코드가 필요하게 됨 --> 이는 JavaScript만으로 개발하고자 하는 취지에 벗어난 것 Node.js --> 자바스크립트 개발환경 구축 NPM --> 자바스크립... JavaScript리액트 네이티브안드로이드 앱 개발JavaScript [ReactNative] Expo 날씨(expo-location) 서버 외부 API 사용 방법(1) - 서버가 만들어놓은 함수 사용 안드로이드 IOS 개발할 땐 코드를 일정 부분 좀 써줘야 되는데 expo로 빠르게 해결할 수 있다. 도구 설치 외부 API 요청 작업은 try / catch로 감싸기 API 호출을 제대로 호출 했지만 서버나 혹은 휴대폰 자체에서 등, 앱 외적으로 오류가 발생 할 수도 있다. 우리가 잡지 못할 오류가 발생할 가능성이 있는 이런 상황들을 처리하는 코드이다. try{ } 부분엔 API요청 같은 작... 리액트 네이티브reactnativereactnative
[React Native] 시작하기 React Native 개발환경 React Native CLI 준비 : Xcode(iOS) 또는 Android Studio(windows) Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정 1. Chocolatey 설치 Chocolatey 설치 확인 - Node.js 설치 및 확인 - jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기) windows 사용자로... 리액트 네이티브react nativereact native [앱개발]- 종류(Native, Hybrid, Cross-platform) and React Native, JS 정리해보자면 사용자들이 보는 앱 화면을 만들고 앱 개발은 대표적으로 "안드로이드"와 "iOS(아이폰)" 두 가지가 있다. 💡 앱 개발 종류 먼저 앱 개발 종류를 살펴보자면 안드로이드, iOS 각각 개발 하는 네이티브 앱! 마지막으로 위 두 가지 방법을 합친 크로스 플랫폼 앱! 🔍 네이티브 앱 (Native App) 다른 방식들보다 높은 수준의 기술력이 필요하며, 각기의 모바일 운영체제(OS)... 리액트 네이티브하이브리드 앱리터럴네이티브 앱비구조 할당Hybrid AppCross-platform Appmodule systemNative App크로스 플랫폼 앱화살표 함수react nativeMaparrow function자바스크립트Cross-platform App [앱개발]-React Native Expo JSX 리액트 네이티브(기술) & Expo(도구) 리액트 네이티브는 자바스크립트(js) 언어 하나로 안드로이드 앱과 iOS앱 두 가지 모두 만들어주는 라이브러리 이다. (라이브러리란 개발 할 때 사용하는 도구이다.) 리액트 네이티브 크로스 플랫폼으로 개발하기 위한 빌드 도구이며, 네이티브 모듈을 보다 쉽고 편하게 사용할 수 있게 도와주는 도구이다. 리액트 네이티브 하나로 안드로이드 앱과 iOS앱 두... 리액트 네이티브JSXNodereact nativenpmExpoExpo 앱 프로젝트 - 1 프로젝트 주제 다이어트나 운동을 보조하기 위한 자기 관리 앱 기획안 [기획안 개요] 1) 프로젝트 이름/간단 설명 다이어터 식단 관리, 운동 방법 및 유명인들의 다이어트 방법 소개, 캘린더를 활용한 운동 스케쥴짜기 등등 --> 운동과 관련된 자기관리를 보조하는 앱 2) 프로젝트 생김새(레이아웃) --> 이미지의 'copy of 운동법' 부분은 운동일정에 관련된 부분입니다. 3) 개발해야 하는... 과제안드로이드 앱 개발리액트 네이티브과제 앱 페이지 적용 - 1 , 네비게이터란? 앱에 여러 페이지를 만들었다면 그 페이지를 이동할 수 있는 기능을 의미한다. --> React Navigation이라는 도구 사용할 것 (Expo측에서 개발한) [React Navigation 설치 가이드] --> yarn을 통해 설치 --> 기본 설치 코드 (네비게이터 활용을 위한) yarn add @react-navigation/native expo install react-native-... 안드로이드 앱 개발리액트 네이티브리액트 네이티브 [ReactNative] 네비게이터(Navigate) 네비게이션 앱 내의 페이지 구성 및 페이지 이동을 적용해주는 이 라이브러리는 다양한 기능들을 가지고 있다. 앱 하단에 탭 버튼을 두고 해당 버튼을 누르면 연결되어 있는 페이지로 바로바로 이동할 수 있게 해주는 기능도 가지고 있다. 스택네비게이션 우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어준다. 이렇게 만든 여러 페이지들을 책갈... reactnative리액트 네이티브reactnative JSX 기본 문법 리액트 네이티브라는 개발도구 위에 Expo를 올려서 손쉽게 코딩하는 형태 --> 기반은 리액트 네이티브이므로 모든 태그는 리액트 네이티브(도구상자)로 부터 불러옴 JSX 문법 --> <> 형태로 된 태그문법로 이루어짐 [Expo로 앱 생성시 초기 화면] --> App() 함수는 View태그를 반환(반환된 View로 화면을 그려주는 것) -->화면에 반환된 View 태그의 내용이 나타남 -->... JSXJavaScript리액트 네이티브안드로이드 앱 개발JSX {}표현식, 조건문 예시 ) 코드의 일부분 let todayWeather = 10 + 17; let todayCondition = "흐림" return ( return 구문 안에서는 {슬래시 + 방식으로 주석 <Text>오늘의 날씨: {자바스크립트처럼 + 연산}</Text> 사용 <Text>나 <ScrollView> 등의 태그에 style을 입히기 위해서도 {} 사용 --> styles.container등 st... JSXJavaScript리액트 네이티브안드로이드 앱 개발JSX 리액트 네이티브 - Expo 여러 앱기능 - 앱에서 외부링크 열기 앱에서 외부링크를 열기 위한 준비 expo에서 제공하는 도구 설치 expo install expo-linking 설치한 도구에서 불러오기 --> expo-linking안의 도구를 모두 가져온는데 그 이름을 Linking이라고 명명짓겠다는 의미 도구를 이용하여 함수 만들기 Linking.openURL(" ) 만든 함수를 활용... JSX리액트 네이티브안드로이드 앱 개발JSX 앱개발을 시작하며 - 자바스크립트 문법 다지기 '스파르타코딩클럽'의 '앱개발 종합반' 강의를 듣고 배우고 있습니다. 따라서 자바스크립트를 배워놓으면 웹도, 앱도 만들 수 있습니다. 크롬 콘솔창은 크롬 브라우저에서 F12를 누르면 열 수 있습니다. 자바스크립트에서는 변수를 선언하는 2가지 방법이 있습니다. 이렇게 let과 var 두 가지로 선언할 수 있습니다. 딕셔너리 또한 객체라고 부를 수 있습니다. 스택을 생각해보면 b_list.pop... 앱개발리액트 네이티브리액트 네이티브 앱개발 준비 - 리액트 네이티브&Expo 설치 및 세팅하기 2. 리액트 네이티브 & Expo 소개 및 설명 3. 리액트 네이티브 & Expo 설치 및 세팅 그렇지만 정말 리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로 앱 개발이 가능 하다 했지만 그렇지 않음을 알 수 있습니다. 그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드,iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구를 사용할건... 앱개발리액트 네이티브리액트 네이티브 [React Native] 어쩌구.gradle 파일의 부재로 빌드 실패하는 에러 해결 모바일 앱이 각 OS(안드로이드, IOS)에서 어떻게 빌드되고 동작하는지 그 플로우에 대한 이해도가 없는 없는 상태에서 마주하는 개발 환경 관련 Error들은, 실제 그 에러의 경중을 떠나 뉴비 모바일 웹 개발자를 당황시키기에 충분하다. 나는 리액트 개발만 조금 해본 귀여운 실력의 소유자이고, 모바일 앱에 대한 경험이 전무한 상태로 RN으로 앱을 만들어서 1월 말까지 출시해야 하는 팀(IT창... 리액트 네이티브react nativeerrorerror 리액트 네이티브 & Expo + Node.js,NPM 란 리액트 --> 웹화면을 만드는 프론트 기술 리액트 네이티브 --> 리액트 + 네이티브 --> 리액트 기술을 응용하여 앱을 만드는 기술 But 리액트 네이티브만으로 개발하다보면 JavaScript뿐만 아니라 안드로이드 코드, ios 코드가 필요하게 됨 --> 이는 JavaScript만으로 개발하고자 하는 취지에 벗어난 것 Node.js --> 자바스크립트 개발환경 구축 NPM --> 자바스크립... JavaScript리액트 네이티브안드로이드 앱 개발JavaScript [ReactNative] Expo 날씨(expo-location) 서버 외부 API 사용 방법(1) - 서버가 만들어놓은 함수 사용 안드로이드 IOS 개발할 땐 코드를 일정 부분 좀 써줘야 되는데 expo로 빠르게 해결할 수 있다. 도구 설치 외부 API 요청 작업은 try / catch로 감싸기 API 호출을 제대로 호출 했지만 서버나 혹은 휴대폰 자체에서 등, 앱 외적으로 오류가 발생 할 수도 있다. 우리가 잡지 못할 오류가 발생할 가능성이 있는 이런 상황들을 처리하는 코드이다. try{ } 부분엔 API요청 같은 작... 리액트 네이티브reactnativereactnative